<script setup lang="ts">
import { computed, ref, onMounted, Ref } from 'vue'
import { Editor } from '@bytemd/vue-next'
import 'bytemd/dist/index.css'
import 'highlight.js/styles/vs.css'
import 'juejin-markdown-themes/dist/juejin.min.css'
import gfm from '@bytemd/plugin-gfm'
import { useRouter } from 'vue-router'
import { getArticleDetailApi } from '@/api/article'

defineOptions({
  name: 'Drafts'
})

const router = useRouter()
const content = ref('')
const title = ref('')
const plugins = ref([gfm()])
const articleId = router.currentRoute.value.query.id as string
const articleDetail = ref() as Ref<ArticleDetail>

onMounted(() => {
  getArticleDetail()
})

const getArticleDetail = async () => {
  const result = await getArticleDetailApi(articleId)
  console.log(result)
  articleDetail.value = {
    id: result.data?.articleContent.id,
    title: result.data?.articleInfo.title,
    content: result.data?.articleContent.content,
    articleId: result.data?.articleContent.articleId
  } as ArticleDetail
  title.value = articleDetail.value.title
  content.value = articleDetail.value.content
}

const handleChange = (v: string) => {
  content.value = v
}
const handleBack = () => {
  router.go(-1)
}
</script>
<template>
  <section class="h-editor">
    <section class="h-editor-header">
      <section class="title">
        <input v-model="title" type="text" placeholder="标题" />
      </section>
      <section class="tools">
        <a-button size="large">保存</a-button>
        <a-button size="large">保存至草稿箱</a-button>
        <a-button type="primary" size="large">发布</a-button>
        <a-button type="default" size="large" @click="handleBack"> 返回 </a-button>
        <section>
          <a-avatar :size="40">
            <template #icon>
              <a-image
                src="https://p3-passport.byteacctimg.com/img/user-avatar/4e325fe2da7b9912ba6f40d14b1753a7~40x40.awebp"
              ></a-image>
            </template>
          </a-avatar>
        </section>
      </section>
    </section>
    <section class="content">
      <Editor class="ProseMirror" :value="content" @change="handleChange" :plugins="plugins" />
    </section>
  </section>
</template>
<style lang="scss" scoped>
.h-editor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .h-editor-header {
    background: #fff;
    display: flex;

    .title {
      padding: 10px;
      width: 70%;
      background: #5bc0de;

      input {
        margin-left: 20px;
        width: calc(100% - 20px);
        height: 40px;
        border: none;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 2rem;
      }

      input:focus {
        border: none !important;
        outline: none;
      }
    }

    .tools {
      width: 30%;
      background: #5cb85c;
      margin-right: 30px;
      display: flex;
      justify-content: end;
      align-items: center;
      gap: 20px;
    }
  }

  .content {
    flex: 1;
    display: flex;

    .ProseMirror {
      flex: 1;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
    }

    .CodeMirror {
      flex: 1;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
    }
  }
}
</style>
